<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #icon{
                width: 100px;
                height: 100px;
                background-size: 100% 100%;
            }
            .iphone #icon{
                background-image: url(img/iphone.png);
            }
            .ipad #icon{
                background-image: url(img/iPad.png);
            }
            .pc #icon{
                background-image: url(img/pc.png);
            }
            .android #icon{
                background-image: url(img/Android.png);
            }
            .lt640 #icon{
                width: 400px;
                height: 400px;
            } 
            
            .gt1200 #icon{
                width: 600px;
                height: 600px;
            }
        </style>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    </head>
    <body>
        <!-- navigator可以获取客户端(浏览器)的一些信息 -->

        <div id="icon"></div>
        <script type="text/javascript">
            
             function wtXys(){
                var html = document.querySelector("html");
                var userAgent = navigator.userAgent;
                console.log(userAgent);
                html.className="";
                if(userAgent.indexOf("iPhone")!= -1){
                    html.classList.add("iphone");
                }else if(userAgent.indexOf("iPad")!= -1){
                    html.classList.add("ipad");
                }else if(userAgent.indexOf("Android")!= -1){
                    html.classList.add("android");
                }else{
                    html.classList.add("pc");
                };

                
                 if (window.innerWidth < 640) {
                     html.classList.add("lt640");
                     html.classList.add("lt960");
                     html.classList.add("lt1200");
                 } else if (window.innerWidth < 960) {
                     html.classList.add("lt960");
                     html.classList.add("lt1200");
                      html.classList.add("gt640");
                 } else if (window.innerWidth < 1200) {
                     html.classList.add("gt640");
                     html.classList.add("gt960");
                     html.classList.add("lt1200");
                 } else {
                     html.classList.add("gt640");
                     html.classList.add("gt960");
                     html.classList.add("gt1200");
                 }
            };

            wtXys();
            window.onresize = function(){
                wtXys();
            }
        

        
        </script>
    </body>
</html>